import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/rendering.dart';

/// 对话模式界面
///
/// 这是应用程序的对话模式界面，提供双向实时翻译功能。
/// 界面包含两个输入区域，用于不同语言的输入，中间是语言切换区域。
/// 支持语音输入、键盘输入等多种输入方式，适合面对面交流场景。
class ConversationScreen extends StatefulWidget {
  const ConversationScreen({super.key});

  @override
  State<ConversationScreen> createState() => _ConversationScreenState();
}

class _ConversationScreenState extends State<ConversationScreen> {
  // 语音输入状态标志
  bool _isListening = false;

  @override
  void initState() {
    super.initState();
    // 确保显示状态栏
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[850],
      appBar: AppBar(
        backgroundColor: Colors.grey[900],
        elevation: 0,
        automaticallyImplyLeading: false,
        title: Transform.rotate(
          angle: 3.14159, // 180度旋转
          child: Container(
            width: 48,
            height: 48,
            decoration: const BoxDecoration(
              color: Colors.red,
              shape: BoxShape.circle,
            ),
            child: IconButton(
              icon: const Icon(
                Icons.mic,
                color: Colors.white,
                size: 24,
              ),
              onPressed: () {
                setState(() {
                  _isListening = !_isListening;
                });
              },
            ),
          ),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 10),
        child: Column(
          children: [
            // 他人语言输入框
            Expanded(
              flex: 2,
              child: Transform.rotate(
                angle: 3.14159, // 180度旋转
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.95,
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.grey[900],
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(
                      color: Colors.grey[700]!,
                      width: 1,
                    ),
                  ),
                  child: const SingleChildScrollView(
                    child: Text(
                      '他人说话的内容将显示在这里...',
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 10),
            // 语言切换区域
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 第一语言选择
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Transform.rotate(
                        angle: 3.14159, // 180度旋转
                        child: Text(
                          '中文 (简体)',
                          style: GoogleFonts.notoSansSc(
                            fontSize: 15,
                            color: Colors.white,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ),
                      const SizedBox(width: 6),
                      Transform.rotate(
                        angle: 3.14159, // 180度旋转
                        child: Container(
                          padding: const EdgeInsets.all(4),
                          decoration: BoxDecoration(
                            color: Colors.red.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: const Icon(
                            Icons.flag,
                            color: Colors.red,
                            size: 18,
                          ),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(width: 16),
                  // 语言切换按钮
                  Container(
                    width: 28,
                    height: 28,
                    decoration: BoxDecoration(
                      color: Colors.grey[850],
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(color: Colors.blue, width: 2),
                    ),
                    child: Stack(
                      alignment: Alignment.center,
                      children: const [
                        Positioned(
                          left: 2,
                          top: 5,
                          child: Icon(
                            Icons.arrow_upward,
                            color: Colors.blue,
                            size: 12,
                          ),
                        ),
                        Positioned(
                          right: 2,
                          bottom: 5,
                          child: Icon(
                            Icons.arrow_downward,
                            color: Colors.blue,
                            size: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(width: 16),
                  // 第二语言选择
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(4),
                        decoration: BoxDecoration(
                          color: Colors.green.withOpacity(0.1),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: const Icon(
                          Icons.flag,
                          color: Colors.green,
                          size: 18,
                        ),
                      ),
                      const SizedBox(width: 6),
                      Text(
                        '中文(繁体)',
                        style: GoogleFonts.notoSansSc(
                          fontSize: 15,
                          color: Colors.white,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            const SizedBox(height: 10),
            // 自己语言输入框
            Expanded(
              flex: 2,
              child: Container(
                width: MediaQuery.of(context).size.width * 0.95,
                margin: const EdgeInsets.symmetric(horizontal: 10),
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.grey[900],
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: Colors.grey[700]!,
                    width: 1,
                  ),
                ),
                child: const SingleChildScrollView(
                  child: Text(
                    '我说话的内容将显示在这里...',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 16,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      // 底部功能按钮栏
      bottomNavigationBar: BottomAppBar(
        color: Colors.grey[900],
        child: SizedBox(
          height: 56,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // 返回翻译模式按钮
              GestureDetector(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: SizedBox(
                  width: 40,
                  height: 40,
                  child: Stack(
                    alignment: Alignment.center,
                    children: const [
                      Positioned(
                        left: 8,
                        top: 8,
                        child: Icon(
                          Icons.arrow_upward,
                          color: Colors.white,
                          size: 14,
                        ),
                      ),
                      Positioned(
                        right: 8,
                        bottom: 8,
                        child: Icon(
                          Icons.arrow_downward,
                          color: Colors.white,
                          size: 14,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // 语言切换按钮
              SizedBox(
                width: 40,
                height: 40,
                child: IconButton(
                  padding: EdgeInsets.zero,
                  icon:
                      const Icon(Icons.refresh, color: Colors.white, size: 22),
                  onPressed: () {},
                ),
              ),
              // 语音输入按钮
              Container(
                width: 48,
                height: 48,
                decoration: BoxDecoration(
                  color: _isListening ? Colors.red : Colors.blue,
                  shape: BoxShape.circle,
                ),
                child: IconButton(
                  icon: Icon(
                    _isListening ? Icons.mic : Icons.mic_none,
                    color: Colors.white,
                    size: 24,
                  ),
                  onPressed: () {
                    setState(() {
                      _isListening = !_isListening;
                    });
                  },
                ),
              ),
              // 相机输入按钮
              SizedBox(
                width: 40,
                height: 40,
                child: IconButton(
                  padding: EdgeInsets.zero,
                  icon: const Icon(Icons.camera_alt,
                      color: Colors.white, size: 22),
                  onPressed: () {},
                ),
              ),
              // 键盘输入按钮
              SizedBox(
                width: 40,
                height: 40,
                child: IconButton(
                  padding: EdgeInsets.zero,
                  icon:
                      const Icon(Icons.keyboard, color: Colors.white, size: 22),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
